<!-- 商品添加 -->
<template>
  <div>
    <Title title="添加商品"></Title>
    <e-form v-moudle="goods" class="goods-form">
      <el-form-item label="商品名称">
        <el-input size="large" v-model="goods.name"></el-input>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-select v-model="goods.category" size="large" style="width: 180px;" placeholder="请选择商品分类">
          <el-option v-for="(item, index) in categorys" :key="index" :lable="item.cateName" :value="item.cateName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input-number v-model="goods.price" :min="0" size="large" />
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" >
          <img v-if="goods.imgUrl" :src="baseUrl+goods.imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input size="large" type="textarea" v-model="goods.goodsDesc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="large" type="primary" class="btn" @click="addBtn">添加商品</el-button>
      </el-form-item>

    </e-form>
  </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
import Title from '@/views/home/component/Title.vue';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getGoodsType, addGoods } from '@/api/goods';
import { useRouter } from 'vue-router';
// 引入公共配置 服务器地址
import { baseUrl,uploadUrl } from "@/utile/commen.js"

//获取路由实例
const router = useRouter();
//商品分类
const categorys = ref([]);
//添加商品信息
const goods = reactive({
  name:'',
  category:'',
  price:'0',
  imgUrl:'',
  goodsDesc:''
});

//图片上传成功 执行的函数 获得后端返回的图片地址
const handleAvatarSuccess= (response,uploadFile) => {
  goods.imgUrl = response.imgUrl;
}



//获得全部分类信息
const getCategorys = async () => {
  const res = await getGoodsType();
  categorys.value = res.categories;
}
getCategorys();

//添加商品
const addBtn = async ()=>{
  const str = '/upload/imgs/goods_img/';//判断图片地址是否包含str
  goods.imgUrl = goods.imgUrl.substring(str.length);//截取图片地址
  const {code,msg} = await addGoods(goods);
  
  if(code===0){
    ElMessage.success(msg);
    //跳转到商品列表页面并清空表单
    goods.name = '';
    goods.category = '';
    goods.price = '0';
    goods.imgUrl = '';
    goods.goodsDesc = '';
    router.push('/goodsList');
  }else{
    ElMessage.error(msg);
  }
}

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.goods-form{
      margin-top: 20px;
      margin-left: 12px;
   }
   .btn{
      margin-left: 76px;
   }
</style>